<template>
    <div class="bg" @click="takePhoto" :style="{ backgroundSize : client.w+'px' }">
        <div class="modal modal-top-left" :style="{ width : camera.x+camera.w/2+'px', height : camera.y-camera.h/2+'px' }"></div>
        <div class="modal modal-top-right" :style="{ width : client.w-camera.x-camera.w/2+'px', height : camera.y+camera.h/2+'px' }"></div>
        <div class="camera" :style="{ left : camera.x+'px' , top : camera.y+'px' }">
            <div class="box box-top-left"></div>
            <div class="box box-top-right"></div>
            <div class="box box-bottom-left"></div>
            <div class="box box-bottom-right"></div>
        </div>
        <div class="modal modal-bottom-left" :style="{ width : camera.x-camera.w/2+'px', height : client.h-camera.y+camera.h/2+'px' }"></div>
        <div class="modal modal-bottom-right" :style="{ width : client.w-camera.x+camera.w/2+'px', height : client.h-camera.y-camera.h/2+'px' }"></div>
        <div class="test" :class="{ 'show':test }" >x:{{camera.x}} y:{{camera.y}} list:{{list}}</div>
        <ul class="list">
            <li v-for="item in list" :style="{ backgroundSize : client.w+'px', backgroundPositionX : -item.x+camera.w/2+'px', backgroundPositionY : -item.y+camera.h/2+'px' }" class="item"></li>
        </ul>
        <div class="mask" :class="{ 'mask-bling' : bling }"></div>
        <audio id="bling">
            <source src="http://sxyd.sc.chinaz.com/files/download/sound1/201205/1374.wav">
        </audio>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data(){
            return{
                test:false,
                camera:{
                    x: 120,
                    y: 80,
                    w: 240,
                    h: 160
                },
                client:{
                    w:document.body.clientWidth,
                    h:document.body.clientHeight
                },
                list:[],
                bling:false
            }
        },
        props : [],
        methods:{
            takePhoto(ev){
                document.body.onmousemove = null;
                this.bling = true;
                const audio = document.querySelector("#bling");
                audio.play();
                setTimeout(()=>{
                    this.list.unshift({
                        x:this.camera.x,
                        y:this.camera.y
                    })
                    this.bling = false;
                    mouseMove(this);
                },500)
            }
        },
        created(){
            window.onresize = () =>{
//                this.client.w = document.body.clientWidth;
//                this.client.h = document.body.clientHeight;
                location.reload()
            }
            mouseMove(this);
        }
    }
    const mouseMove = thiz => {
        document.body.onmousemove = ev =>{
            const mouseX = ev.clientX;
            const mouseY = ev.clientY;
            if (mouseX < thiz.camera.w/2)
                thiz.camera.x = thiz.camera.w/2
            else if (mouseX > (thiz.client.w - thiz.camera.w/2))
                thiz.camera.x = thiz.client.w - thiz.camera.w/2
            else
                thiz.camera.x = mouseX
            if (mouseY < thiz.camera.h/2)
                thiz.camera.y = thiz.camera.h/2
            else if (mouseY > (thiz.client.h - thiz.camera.h/2))
                thiz.camera.y = thiz.client.h - thiz.camera.h/2
            else
                thiz.camera.y = mouseY
        }
    }
</script>
<style scoped>
    .bg{
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        cursor: none;
        overflow: hidden;
        background: url("http://imgs.aixifan.com/live/1482830875788/1482830875788.jpg") no-repeat;
    }
    .bg .test{
        position: absolute;
        display:none;
        bottom:0;
        right:0;
        color: #fff;
    }
    .bg .show{
        display:block;
    }
    .bg .modal{
        position: absolute;
        background-color: rgba(0,0,0,0.4)
    }
    .bg .modal-top-left{
        left:0;
        top:0;
    }
    .bg .modal-top-right{
        right:0;
        top:0;
    }
    .bg .modal-bottom-left{
        bottom:0;
        left:0;
    }
    .bg .modal-bottom-right{
        bottom:0;
        right:0;
    }
    .bg .camera{
        position: absolute;
        width:240px;
        height:160px;
        transform: translate3d(-120px,-80px,0);
    }
    .bg .camera .box{
        position: absolute;
        width:30px;
        height:30px;
        box-sizing: border-box;
        border-color: rgba(255,255,255,0.7);
    }
    .box-top-left{
        left:10px;
        top:10px;
        border-left:3px solid;
        border-top:3px solid;
    }
    .box-top-right{
        right:10px;
        top:10px;
        border-right:3px solid;
        border-top:3px solid;
    }
    .box-bottom-left{
        left:10px;
        bottom:10px;
        border-left:3px solid;
        border-bottom:3px solid;
    }
    .box-bottom-right{
        right:10px;
        bottom:10px;
        border-right:3px solid;
        border-bottom:3px solid;
    }
    .bg .list{
        position: absolute;
        top:30px;
        right:30px;
        height:160px;
        width:750px;
        font-size: 0;
        z-index: 99;
        overflow: hidden;
    }
    .bg .list .item{
        float:right;
        display: inline-block;
        width: 240px;
        height:100%;
        margin-left:10px;
        background: url("http://imgs.aixifan.com/live/1482830875788/1482830875788.jpg") no-repeat;
        box-sizing: border-box;
        border: 2px solid #fff;
    }
    .bg .mask{
        position: absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background-color: #ffffff;
        opacity: 0;
    }
    .bg .mask-bling{
        animation: bling ease 0.3s;
    }
    @keyframes bling {
        0%{ opacity: 0 }
        70%{ opacity: 0.7 }
        100%{ opacity: 0 }
    }
</style>